<template>
  <div
    v-for="(item, index) in state.list"
    v-bind:key="index"
    class="question-item w100 bc2 border-none"
  >
    <QuestionType :msg="{ text: item.title }" />
    <QuestionDescribe :msg="{ text: item.describe }" />
    <TextareaThree
      v-if="state.type === '1'"
      :msg="{ id: item.id, rows: '5' }"
      @textarea-input="fnReturnInput"
    />
    <MultipleChoice
      v-else-if="state.type === '2'"
      :msg="{ id: item.id, list: item.questionItem }"
      @multiple-choice="fnReturnInput"
    />
    <SingleChoice
      v-else-if="state.type === '3'"
      :msg="{ id: item.id, list: item.questionItem }"
      @single-choice="fnReturnInput"
    />
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import QuestionType from "../../Text/QuestionType/QuestionType.vue";
import QuestionDescribe from "../../Text/QuestionDescribe/QuestionDescribe.vue";
import TextareaThree from "../../Input/TextareaThree/TextareaThree.vue";
import MultipleChoice from "../MultipleChoice/MultipleChoice.vue";
import SingleChoice from "../SingleChoice/SingleChoice.vue";

export default {
  // 子组件
  components: {
    QuestionType,
    QuestionDescribe,
    TextareaThree,
    MultipleChoice,
    SingleChoice,
  },
  // 父组件传值
  props: {
    list: Object,
    type: String,
  },
  // 抛出事件组
  emits: ["question-item"],
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      list: props.list,
      type: props.type,
    });
    // 回传父组件
    const fnReturnInput = (val) => {
      emit("question-item", val);
    };
    // 监听父组件传值
    watch(
      () => props.list,
      (newVal) => {
        state.list = newVal;
      }
    );
    watch(
      () => props.type,
      (newVal) => {
        state.type = newVal;
      }
    );
    // 传入模板
    return { state, fnReturnInput };
  },
};
</script>

<style scoped>
.question-item {
  min-height: 80px;
  margin-top: 10px;
  padding: 10px 15px;
  border: 4px solid rgba(29, 96, 151, 0.35);
}
</style>
